<template>
  <div>
    <el-form size="mini" inline>
      <el-form-item>
        <el-date-picker
          v-model="formData.register_date"
          type="date"
          value-format="yyyy-MM-dd"
          :clearable="false"
          style="width: 150px"
          placeholder="日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="loadData" type="primary">搜索</el-button>
        <el-button @click="exportData" type="danger">导出</el-button>
      </el-form-item>
    </el-form>
    <div class="data-table">
      <table v-loading="loading">
        <thead>
        <tr>
          <th rowspan="2">
            姓名
          </th>
          <th rowspan="2">
            新增数量
          </th>
          <th :colspan="channelList.length">
            来源渠道
          </th>
        </tr>
        <tr>
          <th v-for="i in channelList" :key="i.value">
            {{ i.label }}
          </th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,itemIndex) in dataList" :key="itemIndex">
          <td>
            {{ item.user_name }}
          </td>
          <td>
            {{ item.total }}
          </td>
          <td v-for="i in channelList" :key="i.value">
            {{ item.channels[i.value] || 0 }}
          </td>
        </tr>
        </tbody>
      </table>
      <el-empty v-if="!dataList.length && !loading">

      </el-empty>
    </div>
    <loading-dialog v-model="isExporting" loading-text="正在导出，请稍等"/>
  </div>
</template>

<script>
import moment from 'moment'
import { dicApi } from '@/feature/sys/infra/api/dicApi'
import SysDicTypeEnum from '@/feature/sys/infra/constants/SysDicTypeEnum'
import CompetingStoreBloggerApi from '@/infra/api/mct/CompetingStoreBloggerApi'
import { deliveryComplainApi } from '@/feature/cmt/infra/api/deliveryComplainApi'
import ExcelUtil from '@/framework/infra/excel/ExcelUtil'
import LoadingDialog from '@/framework/components/dialog/LoadingDialog'

export default {
  name: 'UserNewDaily',
  components: { LoadingDialog },
  data() {
    return {
      channelList: [],
      loading: true,
      isExporting: false,
      formData: {
        register_date: moment().format('YYYY-MM-DD')
      },
      dataList: [],
      dateList: []
    }
  },
  created() {
    this.loadChannelList().then(() => {
      this.loadData()
    })
  },
  methods: {
    loadChannelList() {
      return dicApi.allOptions(SysDicTypeEnum.CHANNEL.id).then(data => {
        data.push({
          value: '',
          label: '其他'
        })
        this.channelList = data
      })
    },
    loadData() {
      this.loading = true
      CompetingStoreBloggerApi.dailyUserBloggerReport(this.formData).then(res => {
        this.dataList = res
      }).finally(() => {
        this.loading = false
      })
    },
    exportData() {
      this.isExporting = true
      CompetingStoreBloggerApi.dailyUserBloggerReport(this.formData).then(data => {
        const header = ['姓名', '新增数量']
        header.push(['来源渠道', this.channelList.map(el => el.label)])
        const exportedData = []
        if (data && data.length) {
          for (const row of data) {
            exportedData.push([
              row.user_name,
              row.total,
              ...this.channelList.map(el => row.channels[el.value] || 0)
            ])
          }
        }
        ExcelUtil.exportTable({
          header,
          data: exportedData,
          filename: '[个人]每日新增数据表'
        })
      }).finally(() => {
        this.isExporting = false
      })
    }
  }
}
</script>

<style scoped>
.data-table {
  padding-bottom: 100px;
  overflow-x: auto;
  table-layout: fixed;
  white-space: nowrap;
}
</style>
